{% extends "base.html" %}

{% block head %}
      <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />


<meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" type="text/css" href="/static/css/gradesheet.css" />
    <script type="text/javascript" src="/static/js/gradesheet.js"></script>
    
    <link rel='stylesheet' type='text/css' href='/static/x/xtable.css'>
    <style type='text/css'>
    html, body {
      width: 99%;
      height: 99%;
    }
    div.xtRoot { /* override styles in xtable.css */
      height: 500px;
      width: 97%
    }
    </style>
    <script type='text/javascript' src='/static/x/x.js'></script>
    <script type='text/javascript' src='/static/x/lib/xfirstchild.js'></script>
    <script type='text/javascript' src='/static/x/lib/xnextsib.js'></script>
    <script type='text/javascript' src='/static/x/lib/xtable.js'></script>
    <script type='text/javascript'>
    var xt1;
    xAddEventListener(window, 'load',
      function() {
	xt1 = new xTable('table1', 'xtRoot', 'xtCaption', 'xtFzRow', 'xtFRInner', 'xtFRCell', 'xtFzCol', 'xtFCInner', 'xtFCCell', 'xtTblCon', 'xtCellTbl');
      }, false
    );
    </script>
  
{% endblock %}


{% block content %}
<div class="xtRoot">
    <table id='table1' class='xTable'>
	<thead>
	    <tr>
		<th>Student</th>
		{% for th in fifty %}
		    <th>H {{ th }}</th>
		{% endfor %}
		<th>Final</th>
	    </tr>
	</thead>
	<tbody>
	    {% for student in fifty %}
	    {% with row_counter=forloop.counter0 %}
	    <tr>
		<td>
		    {{ student }}
		</td>
		{% for mp in fifty %}
		    <td class="column_{{ forloop.counter0 }} row_{{ row_counter }}">
			<input
			    id="id_grade_{{ student.id }}_{{ grade.id }}"
			    name="grade_{{ grade.id }}"
			    value="{{ grade.get_grade }}"
			    class="grade_form"
			    size="7"
			    onkeydown="return keyboard_nav(event)"
			    onchange="student_grade_change(event,{{ student.id }})"
			/>
		    </td>
		{% endfor %}
		</td>
		<td>End</td>
	    </tr>
	{% endwith %}
	
	{% endfor %}
	</tbody>
    </table>
</div>
{% endblock %}
